<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="keywords" content="" /> 
<meta name="description" content="" />
<title>七天包换</title>
<link type="text/css" href="css/reset.css" rel="stylesheet" />
<link type="text/css" href="css/public.css" rel="stylesheet" />
<link type="text/css" href="css/style.css" rel="stylesheet" />
<link type="text/css" href="css/wode.css" rel="stylesheet" />
<script>
    var deviceWidth = Math.min(640, window.innerWidth)
    document.documentElement.style.fontSize = deviceWidth / 7.5 + "px"
</script>
</head>


<body>
<!--侧滑菜单容器-->
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
	<!--菜单部分-->
	<aside id="offCanvasSide" class="mui-off-canvas-right">
		<div id="offCanvasSideScroll" class="mui-scroll-wrapper">
			<div class="mui-scroll">
				<div class="title">侧滑导航</div>
				<div class="content">
					这是可拖动式侧滑菜单示例，你可以在这里放置任何内容；关闭侧滑菜单有多种方式： 1.在手机屏幕任意位置向右拖动(drag)；2.点击本侧滑菜单页之外的任意位置; 3.点击如下红色按钮
					<span class="android-only">；4.Android手机按back键；5.Android手机按menu键
					</span>。
					<p style="margin: 10px 15px;">
						<button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭侧滑菜单</button>
					</p>

				</div>
				<div class="title" style="margin-bottom: 25px;">侧滑列表示例</div>
				<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
							Item 1
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
							Item 2
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
							Item 3
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
							Item 4
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
							Item 5
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right">
						Item 6
					</a>
					</li>

				</ul>
			</div>
		</div>
	</aside>
	<div class="mui-inner-wrap">
		<div class="header">
		    <header class="p_header public-red">
		        <a href="javascript:history.go(-1);" class="p_header_left">
		            <i class="p_left" title="返回"></i>
		        </a>
		        <h1 class="p_dizhi">
		        	<a href="1.4.0seach.html" class="top_seach"><img src="images/top_seach.png" />请输入关键词搜索</a>
		        </h1>
		        <a  id="offCanvasBtn" href="#offCanvasSide" class="p_header_right">筛选</a>
		    </header>
		</div>
		<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--筛选-->
			<section id="Class" class="job-module"> 
				<dl class="retrie"> 
					<dt>
						<a id="area" href="javascript:;"><span>分类</span> <i>&nbsp;</i></a>
						<a id="wage" href="javascript:;"><span>属性</span><i>&nbsp;</i></a>
						<a id="price" href="javascript:;"><span>按销量</span><i>&nbsp;</i></a>
					</dt> 
					<dd class="area"> 
						<ul class="slide downlist" id="sortUl"> 
							<li sort-Screen="1">服饰类</li> 
							<li sort-Screen="2">饰品类</li> 
							<li sort-Screen="3">鞋类</li> 
							<li sort-Screen="4">包类</li> 
							<li sort-Screen="5">化妆品</li>
							<li sort-Screen="6">家居用品</li>
						</ul> 
					</dd> 
					<dd class="wage"> 
						<ul class="slide downlist"> 
							<li class="public_shu">
								<div class="w_xxtaba clearfix">
			                        <ul class="w_xxtab_tit w_shaix1 clearfix por">
			                            <li class="w_on1"><a href="javascript:void(0);">风格</a></li>
			                            <li><a href="javascript:void(0);">季节</a></li>
			                            <li><a href="javascript:void(0);">面料</a></li>
			                            <li><a href="javascript:void(0);">厚度</a></li>
			                        </ul>
			                        <!-- 风格 -->
			                        <div class="w_ddcon">
			                            <div class="haozhai_quyu">
			                                <ul>
			                                    <li class="shu_curr">日韩</li>
			                                    <li>欧美</li>
			                                    <li>大码女装</li>
			                                    <li>中国风</li>
			                                    <li>大众</li>
			                                    <li>运动风</li>
			                                    <li>其他</li>
			                                </ul>
			                            </div>
			                        </div>
			                        <!-- 季节 -->
			                        <div class="w_ddcon">
			                            <div class="haozhai_quyu">
			                                <ul>
			                                    <li class="shu_curr">春</li>
			                                    <li>夏</li>
			                                    <li>秋</li>
			                                    <li>冬</li>
			                                </ul>
			                            </div>
			                        </div>
			                        <!-- 面料 -->
			                        <div class="w_ddcon">
			                            <div class="haozhai_quyu">
			                                <ul>
			                                    <li class="shu_curr">冰丝</li>
			                                    <li>纯棉</li>
			                                    <li>亚麻</li>
			                                    <li>丝光棉</li>
			                                </ul>
			                            </div>
			                        </div>
			                        <!-- 厚度 -->
			                        <div class="w_ddcon">
			                            <div class="haozhai_quyu">
			                                <ul>
			                                    <li class="shu_curr">超薄</li>
			                                    <li>薄</li>
			                                    <li>中等</li>
			                                    <li>厚</li>
			                                </ul>
			                            </div>
			                        </div>
			                    </div>
							</li> 
						</ul>
					</dd> 
					<dd class="price"> 
						<ul class="slide downlist"> 
							<li sort-Screen="1">综合排序</li> 
							<li sort-Screen="2">发布时间</li> 
							<li sort-Screen="3">价格最高</li> 
							<li sort-Screen="4">价格最低</li> 
							<li sort-Screen="5">按收藏量</li> 
							<li sort-Screen="6">按销量</li> 
						</ul> 
					</dd> 
				</dl> 
			</section>
			<div style="width: 100%; height: 49px;"></div>
			
			<!--产品-->
			<div class="clearfix">
				<div class="public_goods">
					<a href="7.0.0goods_detail.html">
						<dl>
							<dt>
								<img src="images/img.jpg" />
							</dt>
							<dd>
								<h5>鹿晗同款夹克情侣装外套男
			女立领休闲短款绣花棒球服</h5>
								<h6>&yen;38.00 - &yen;56.00</h6>
							</dd>
						</dl>
					</a>
				</div>
				<div class="public_goods">
					<a href="7.0.0goods_detail.html">
						<dl>
							<dt>
								<img src="images/img.jpg" />
							</dt>
							<dd>
								<h5>鹿晗同款夹克情侣装外套男
			女立领休闲短款绣花棒球服</h5>
								<h6>&yen;38.00 - &yen;56.00</h6>
							</dd>
						</dl>
					</a>
				</div>
				<div class="public_goods">
					<a href="7.0.0goods_detail.html">
						<dl>
							<dt>
								<img src="images/img.jpg" />
							</dt>
							<dd>
								<h5>鹿晗同款夹克情侣装外套男
			女立领休闲短款绣花棒球服</h5>
								<h6>&yen;38.00 - &yen;56.00</h6>
							</dd>
						</dl>
					</a>
				</div>
				<div class="public_goods">
					<a href="7.0.0goods_detail.html">
						<dl>
							<dt>
								<img src="images/img.jpg" />
							</dt>
							<dd>
								<h5>鹿晗同款夹克情侣装外套男
			女立领休闲短款绣花棒球服</h5>
								<h6>&yen;38.00 - &yen;56.00</h6>
							</dd>
						</dl>
					</a>
				</div>
				<div class="public_goods">
					<a href="7.0.0goods_detail.html">
						<dl>
							<dt>
								<img src="images/img.jpg" />
							</dt>
							<dd>
								<h5>鹿晗同款夹克情侣装外套男
			女立领休闲短款绣花棒球服</h5>
								<h6>&yen;38.00 - &yen;56.00</h6>
							</dd>
						</dl>
					</a>
				</div>
				<div class="public_goods">
					<a href="7.0.0goods_detail.html">
						<dl>
							<dt>
								<img src="images/img.jpg" />
							</dt>
							<dd>
								<h5>鹿晗同款夹克情侣装外套男
			女立领休闲短款绣花棒球服</h5>
								<h6>&yen;38.00 - &yen;56.00</h6>
							</dd>
						</dl>
					</a>
				</div>
			</div>
				

			</div>
		</div>
		<!-- off-canvas backdrop -->
		<div class="mui-off-canvas-backdrop"></div>
	</div>
</div>

<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
//下拉菜单
	$(function(){ 
		$('.retrie dt a').click(function(){
			var $t=$(this);
			if($t.hasClass('up')){
				$(".retrie dt a").removeClass('up');
				$('.downlist').hide();
			}else{
				$(".retrie dt a").removeClass('up');
				$('.downlist').hide();
				$t.addClass('up');
				$('.downlist').eq($(".retrie dt a").index($(this)[0])).show();
			}
		});			
		$(".area ul li").on('click',function(){
			$(".retrie dt a").removeClass('up');
			$(".downlist").hide();
			$("#area span").text($(this).html());
//			mmSort = $(this).attr("sort-Screen");
//	        pageNo = 1;
//			loadData(pageNo);
		})
		
		// tab切换
        $(function () {
           $('.w_xxtab_tit li').on('click',function(){
                //获得当前被点击的元素索引值
                var Index = $(this).index();
                //给菜单添加选择样式
                $(this).addClass('w_on1').siblings().removeClass('w_on1');
                //显示对应的div
                				$('.w_xxtaba').children('div').eq(Index).show().siblings('div').hide();
           });
        });
		$(".haozhai_quyu ul li").on('click',function(){
			$(".retrie dt a").removeClass('up');
			$(".downlist").hide();
			$("#wage span").text($(this).html());
//			mmSort = $(this).attr("sort-Screen");
//	        pageNo = 1;
//			loadData(pageNo);
		})
		
		
		
		$(".price ul li").on('click',function(){
			$(".retrie dt a").removeClass('up');
			$(".downlist").hide();
			$("#price span").text($(this).html());
//			mmSort = $(this).attr("sort-Screen");
//	        pageNo = 1;
//			loadData(pageNo);
		})
	});
	
	//固定
//	$(document).ready(function(){
//		var topMain=$(".header").height();//获取到头部的高度
//		var Logo=$("#Class");
//		$(window).scroll(function(){
//			if($(window).scrollTop()>topMain){
//				Logo.addClass("ScrollNav").css("z-index","102");
//			}else{
//				Logo.removeClass("ScrollNav");}
//		});
//	
//	});

	


	
	
</script>
<link rel="stylesheet" href="css/mui.min.css">
<style>
	html,
	body {
		background-color: #efeff4;
	}
	p {
		text-indent: 22px;
	}
	span.mui-icon {
		font-size: 14px;
		color: #007aff;
		margin-left: -15px;
		padding-right: 10px;
	}
	.mui-off-canvas-right {
		color: #fff;
	}
	.title {
		margin: 35px 15px 10px;
	}
	.title+.content {
		margin: 10px 15px 35px;
		color: #bbb;
		text-indent: 1em;
		font-size: 14px;
		line-height: 24px;
	}
	input {
		color: #000;
	}
</style>
<script src="js/mui.min.js"></script>
<script>
	mui.init({
		swipeBack: false,
	});
	 //侧滑容器父节点
	var offCanvasWrapper = mui('#offCanvasWrapper');
	 //主界面容器
	var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
	 //菜单容器
	var offCanvasSide = document.getElementById("offCanvasSide");
	 //Android暂不支持整体移动动画
	if (!mui.os.android) {
		document.getElementById("move-togger").classList.remove('mui-hidden');
		var spans = document.querySelectorAll('.android-only');
		for (var i = 0, len = spans.length; i < len; i++) {
			spans[i].style.display = "none";
		}
	}
	 //移动效果是否为整体移动
	var moveTogether = false;
	 //侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
	var classList = offCanvasWrapper[0].classList;
	 //变换侧滑动画移动效果；
	mui('.mui-input-group').on('change', 'input', function() {
		if (this.checked) {
			offCanvasSide.classList.remove('mui-transitioning');
			offCanvasSide.setAttribute('style', '');
			classList.remove('mui-slide-in');
			classList.remove('mui-scalable');
			switch (this.value) {
				case 'main-move':
					if (moveTogether) {
						//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
						offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
						moveTogether = false;
					}
					break;
				case 'main-move-scalable':
					if (moveTogether) {
						//仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
						offCanvasWrapper[0].insertBefore(offCanvasSide, offCanvasWrapper[0].firstElementChild);
					}
					classList.add('mui-scalable');
					break;
				case 'menu-move':
					classList.add('mui-slide-in');
					break;
				case 'all-move':
					moveTogether = true;
					//整体滑动时，侧滑菜单在inner-wrap内
					offCanvasInner.insertBefore(offCanvasSide, offCanvasInner.firstElementChild);
					break;
			}
			offCanvasWrapper.offCanvas().refresh();
		}
	});
	document.getElementById('offCanvasShow').addEventListener('tap', function() {
		offCanvasWrapper.offCanvas('show');
	});
	document.getElementById('offCanvasHide').addEventListener('tap', function() {
		offCanvasWrapper.offCanvas('close');
	});
	 //主界面和侧滑菜单界面均支持区域滚动；
	mui('#offCanvasSideScroll').scroll();
	mui('#offCanvasContentScroll').scroll();
	 //实现ios平台的侧滑关闭页面；
	if (mui.os.plus && mui.os.ios) {
		offCanvasWrapper[0].addEventListener('shown', function(e) { //菜单显示完成事件
			plus.webview.currentWebview().setStyle({
				'popGesture': 'none'
			});
		});
		offCanvasWrapper[0].addEventListener('hidden', function(e) { //菜单关闭完成事件
			plus.webview.currentWebview().setStyle({
				'popGesture': 'close'
			});
		});
	}
</script>

</body>
</html>